{% extends "layout.html" %}
{% block title %} VPN 拨号账号修改{% endblock %}

{% block trail %}
        <li><a href="/">Home</a></li>
        <li>VPN</li>
        <li class="current"><a href="{{ url_for('dial.index') }}">Dial</a></li>
{% endblock trail %}

{% block content %}
    {% include "dial/sidenav.html" %}

    <!-- start of vpn table -->
    <div class="large-10 columns">
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      {% for category, message in messages %}
      <div data-alert class="alert-box {{ category }}">
        {{ message }}
        <a href="#" class="close">&times;</a>
      </div>
      {% endfor %}
      {% endif %}
      {% endwith %}
      <div data-alert class="alert-box info">
        注意：删除账号会重载VPN 服务，以确保被删除的账号断开连接。
      </div>
      <form method="POST" action="{{ url_for('dial.id_settings', id=account.id) }}">
        <div class="row">
          <div class="large-3 columns">
            {{ form.name.label(class="right inline") }}
          </div>
          <div class="large-5 columns end">
            {% if form.name.errors %}
            {{ form.name(class="error", value=form.name.value) }}
            <small class="error">{{ form.name.errors[0] }}</small>
            {% else %}
            {{ form.name(value=account.name) }}
            {% endif %}
          </div>
        </div>
        <div class="row">
          <div class="large-3 columns">
            {{ form.password.label(class="right inline") }}
          </div>
          <div class="large-5 columns end">
            <div class="row collapse postfix-round">
              <div class="small-9 columns">
                {% if form.password.errors %}
                {{ form.password(class="error", type="password", value=form.password.value) }}
                <small class="error">{{ form.password.errors[0] }}</small>
                {% else %}
                {{ form.password(type="password", value=account.password) }}
                {% endif %}
              </div>
              <div class="small-3 columns">
                <a href="#" id="showpass" class="postfix button">显示密码</a>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="large-3 columns large-offset-3">
            {{ form.save(class="success tiny button") }}
          </div>
          <div class="large-2 columns end">
            {{ form.delete(class="alert tiny button") }}
          </div>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        </div>
      </form>
    </div>
    <!-- end of vpn table -->
{% endblock content %}

{% block jsplugin %}
<script src="{{ url_for('static', filename='js/vpnview.js') }}"></script>
{% endblock jsplugin %}

